<template>
	<view class="select-bank">
		<uni-popup ref="selectBank" type="bottom" :maskClick="false">
			<scroll-view class="wrapper" scroll-y>
				<view class="border-bototm top-area flex flex-ver flex-sb">
					<view></view>
					<view>选择到账银行卡</view>
					<view class="close-btn" @click="close">x</view>
				</view>

				<view class="list">
					<view class="item mb30 flex flex-ver flex-sb" v-for="(item,index) in bankList" :key="index" @click="selectbankEvent(item,index)">
						<view class="flex flex-ver fs28">
							<image class="img" :src="item.bank_info.icon"></image>
							<view class="lh1">{{`${item.bank_info.name}(${item.number})`}}</view>
						</view>
						<image :src="plusIcon" class="plus-icon" v-if="item.default || currentIndex == index"></image>
					</view>
					<view class="flex flex-ver" @click="$common.navTo('/pages/bank/add')">
						<view class="mr14 plus flex flex-center">+</view>
						<view>添加银行卡</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				currentIndex:'',
				backImg: this.$common.imgUrl() + '/home/04@2x.png',
				plusIcon: this.$common.imgUrl() + '/bank/xuanzhong@2x.png',
			}
		},
		computed: {
			...mapGetters(['userSelectBankInfo']), // custom-header   isIfxed为true时需要使用此变量 => 代表此组件的高度，一般用于页面第一个元素的margin-top
		},
		props: {
			// backIsShow:{
			// 	type:[String,Boolean],
			// 	default:true
			// },
			bankList: {
				type: [Array],
				default(){
					return [];
				}
			},
		},
		components: {
			uniPopup
		},
		created() {
			
		},
		mounted() {
		},
		methods: {
			selectbankEvent(item,index){
				this.currentIndex = index;
				this.close();
				this.$emit('select',item);
			},
			open() {
				this.$refs.selectBank.open();
			},
			close() {
				this.$refs.selectBank.close();
			},
			cancel() {
				this.$emit('cancel');
				this.close();
			},
			confirm() {
				this.$emit('confirm');
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.wrapper {
		height: 700rpx;
		background-color: #fff;
		border-radius: 22rpx 22rpx 0rpx 0rpx;
	}

	.close-btn {
		width: 34rpx;
		height: 34rpx;
		line-height: 28rpx;
		font-size: 22rpx;
		text-align: center;
		border-radius: 50%;
		color: #999999;
		background-color: #fff;
		border: 1px solid #999999;
	}

	.top-area {
		padding: 40rpx;
	}

	.plus-icon {
		width: 20rpx;
		height: 14rpx;
	}

	.plus {
		width: 40rpx;
		height: 40rpx;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #E5E5E5;
	}

	.item {
		.img {
			margin-right: 14rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.list {
		padding: 40rpx;
	}
</style>